<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{% if page.title %}{{ page.title | strip_html }} &#8211; {% endif %}{{ site.title | strip_html }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="{% if page.summary %}{{ page.summary | xml_escape }}{% else %}{{ site.description | xml_escape }}{% endif %}">
    <meta name="author" content="{{ site.author }}">
    {% if page.categories %}<meta name="keywords" content="{{ site.keywords }}{{ page.categories | join: ', ' }}">
    {% else %}<meta name="keywords" content="{{ site.keywords }}">{% endif %}

    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
    <link rel="alternate" type="application/rss+xml" title="RSS Feed for {{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl }}" />

    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ "/css/pixyll.css" | prepend: site.baseurl }}?{{ site.time | date: "%Y%m%d%H%M" }}" type="text/css">

    <!-- Fonts -->
    <link href='//fonts.googleapis.com/css?family=Merriweather:900,900italic,300,300italic' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Lato:900,300' rel='stylesheet' type='text/css'>
    {% if site.show_social_icons or site.show_sharing_icons %}
      <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    {% endif %}


    <!-- Open Graph -->
    <!-- From: https://github.com/mmistakes/hpstr-jekyll-theme/blob/master/_includes/head.html -->
    <meta property="og:locale" content="en_US">
    <meta property="og:type" content="article">
    <meta property="og:title" content="{% if page.title %}{{ page.title | xml_escape }}{% else %}{{ site.title | xml_escape }}{% endif %}">
    <meta property="og:description" content="{% if page.description %}{{ page.description | xml_escape }}{% else %}{{ site.description | xml_escape }}{% endif %}">
    <meta property="og:url" content="{{ site.url }}{{ page.url }}">
    <meta property="og:site_name" content="{{ site.title | xml_escape }}">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary" />
    {% if site.twitter_username %}
        <meta name="twitter:site" content="@{{ site.twitter_username }}" />
    {% endif %}
    <meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
    <meta name="twitter:description" content="{% if page.summary %}{{ page.summary }}{% else %}{{ site.description }}{% endif %}" />
    <meta name="twitter:url" content="{{ site.url }}{{ page.url }}" />

    <!-- Icons -->
    <link rel="apple-touch-icon" sizes="57x57" href="{{ site.url }}/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="{{ site.url }}/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="144x144" href="{{ site.url }}/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="60x60" href="{{ site.url }}/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="120x120" href="{{ site.url }}/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="76x76" href="{{ site.url }}/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="152x152" href="{{ site.url }}/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ site.url }}/apple-icon-180x180.png">
    <link rel="icon" type="image/png" href="{{ site.url }}/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="{{ site.url }}/favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="{{ site.url }}/favicon-32x32.png" sizes="32x32">

    {% if site.google_analytics %}
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', '{{ site.google_analytics }}']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    {% endif %}
</head>
